<template>
    <div class="w-full bg-white">
        <div class=" flex items-center max-w-6xl flex-grow justify-between m-auto">
            <DropDown :message="message" :list="list"></DropDown>
            <div
                class=" bg-slate-200 flex items-center  p-2 m-2 rounded-lg cursor-pointer hover:bg-slate-600 hover:text-white transition-all duration-200">
                <i class="ri-add-line"></i>
                新建话题
            </div>
        </div>
        <div class="grid grid-cols-12 max-w-6xl m-auto border-b-4 text-center cursor-pointer">
            <div class="col-span-7 text-left p-4 hover:bg-slate-400 transition-all duration-200 hover:text-white">话题
            </div>
            <div class="col-span-3 p-4 hover:bg-slate-400 transition-all duration-200 hover:text-white">回复</div>
            <div class="p-4 hover:bg-slate-400 transition-all duration-200 hover:text-white">浏览量</div>
            <div class="p-4 hover:bg-slate-400 transition-all duration-200 hover:text-white">发布时间</div>
        </div>
        <div v-for="(post, i) in posts"
            class="cursor-pointer hover:bg-slate-200 transition-all duration-200 items-center grid grid-cols-12 max-w-6xl m-auto p-4 text-center"
            :class="i === posts.length - 1 ? '' : 'border-b-2'">
            <div class="col-span-7 text-left">
                {{ post.title }}
                <div class="text-left text-sm my-2 text-slate-400">{{ post.location }}</div>
            </div>
            <div class="col-span-3 flex">
                <img v-for="i in 5" src="https://source.unsplash.com/32x32" alt="" class="-m-1 border-2 border-white rounded-full">     
            </div>
            <div :class="parseInt(post.views) >= 1000 ? 'text-red-500 font-bold' : ''">{{ parseInt(post.views) >= 1000 ?
                    Math.floor(parseInt(post.views) / 1000) + 'k' : parseInt(post.views)
            }}</div>
            <div class=" text-slate-500 text-sm">{{ getDisplayTime(post.time) }}</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import DropDown from "./DropDown.vue";
import dayjs from 'dayjs'
import _ from 'lodash'
const list = ['永定', '湖雷', '下洋']
const message = '选择地区'
const posts = ref(null)
fetch(`http://${location.hostname}:${4000}/posts`).then(res => res.json()).then((data) => {
    data = _.sortBy(data, ['time']).reverse()
    posts.value = data
})

const getDisplayTime = (date) => {
    const prev = dayjs(date)
    const cur = dayjs()
    if (cur.year() != prev.year()) return prev.format('YYYY 年 M 月')
    if (cur.month() != prev.month()) return prev.format('M 月 D 日')
    if (cur.date() != prev.date()) return prev.format('D 日 ')
    return prev.format('H 时')
}

</script>
